<template>
  <div>
    <!-- 表格 -->
    <i-table
      border
      :highlight-row="highlight"
      @on-current-change="checkItemFunction"
      @on-row-dblclick="returnItem"
      class="table"
      :id="id"
      ref="table"
      :columns="tableColumns"
      :data="tableData"
      :height="height"
      :loading="loading"
    ></i-table>
    <!-- pageShow?'-': -->
    <template v-if="pageShow">
      <Row type="flex" align="middle" justify="space-between" style="margin:20px 0;">
        <span>共 {{totalNum || 0}} 条记录 第 {{page || 1}}/{{Math.ceil(totalNum/pageSize) || 1}} 页</span>
        <Page
          :page-size="pageSize"
          :total="totalNum"
          @on-change="goPage"
          @on-page-size-change="setPageSize"
          show-elevator
          :show-sizer="sizerShow"
          :page-size-opts="sizeOpts"
          transfer
        />
      </Row>
    </template>
    <template v-if="modalShow">
      <Divider style="margin:15px 0" />
      <Row type="flex" align="middle" justify="space-between">
        <span></span>
        <div class="buttonBox">
          <i-button @click="modalRemove" style="margin-right:20px;">关闭</i-button>
          <i-button type="info" @click="modalOk">确定</i-button>
        </div>
      </Row>
    </template>
  </div>
</template>

<script>
import { setTimeout } from "timers";
export default {
  props: {
    height: {
      type: Number,
      default: 478,//441,高度低了不知道怎么回事导致分页弹出被遮住
    },
    loading: {
      type: Boolean,
      default: false
    },
    tableColumns: {
      type: Array,
      default: []
    },
    tableData: {
      type: Array,
      default: []
    },
    rowSpan: {
      type: Boolean,
      default: false
    },
    rowSpanSize: {
      type: Number,
      default: 1
    },
    id: {
      type: String,
      default: null
    },
    pageSize: {
      type: Number,
      default: 20
    },
    totalNum: {
      type: Number,
      default: 1
    },
    pageShow: {
      type: Boolean,
      default: true
    },
    sizerShow: {
      type: Boolean,
      default: false
    },
    highlight: {
      type: Boolean,
      default: false
    },
    returnItem: {
      type: Function,
      default: () => {}
    },
    deselectItem: {
      type: Function,
      default: () => {}
    },
    modalShow: {
      type: Boolean,
      default: false
    }
  },
  components: {},
  data() {
    return {
      checkItem: null,
      setRowSpan: false,
      page: 0,
      sizeOpts: [10, 20, 50]
    };
  },
  computed: {},
  watch: {
    totalNum(val) {
      if (val == 0) {
        this.page = 0;
      } else {
        if (this.page == 0 && val != 0) {
          this.page = 1;
        }
      }
    }
  },
  methods: {
    modalOk() {
      this.returnItem(this.checkItem);
    },
    modalRemove() {
      this.deselectItem();
    },
    checkItemFunction(val) {
      this.checkItem = val;
    },
    goPage(page) {
      this.page = page;
      this.$emit("input", page);
    },
    exportCsv() {
      this.$refs.table.exportCsv({
        filename: "表格数据"
      });
    },
    setPageSize(val) {
      console.log(val);
      this.$emit("setPageSize", val);
    }
  },
  created() {},
  mounted() {
    if (this.rowSpan) {
      if (this.tableData != null && this.tableData.length > 0) {
        //原生
        setTimeout(() => {
          this.$refs.table.$children[
            this.rowSpanSize
          ].$children[0].$el.children[0].rowSpan = this.tableData.length;

          //JS查找
          var list = document
            .getElementById(this.id)
            .getElementsByClassName("ivu-table-tbody");
          list[(this.rowSpanSize - 1) / 2].childNodes.forEach(
            (element, index) => {
              if (index != 0) {
                if (element.className == "ivu-table-row") {
                  element.removeChild(element.childNodes[0]);
                }
              } else {
                element.childNodes[0].style.background = "#fff";
              }
            }
          );
        }, 200);
      }
    }
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {} // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
/deep/.ivu-table-tip table tr td {
  text-align: center;
  background-image: url("~@/assets/img/efficiencyAnalysis/zwsj.png");
  background-position: center 60px;
  background-repeat: no-repeat;
  color: #999;
  height: 369px;
  background-size: 190px;
  span {
    display: none;
  }
}
</style>
